<%--
  Created by IntelliJ IDEA.
  User: hhx
  Date: 2025/1/13
  Time: 9:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>修改商品信息</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    <style>
        .txt:focus {
            outline: none;
            border: 2px solid #65a0fa;
        }
    </style>
</head>
<body>
<!-- 判断是否登陆 -->
<c:if test="${empty user}">
    <jsp:forward page="login.jsp"></jsp:forward>
</c:if>
<div class="main">
    <h1>修改商品信息</h1>
    <div class="add">
        <form method="post" action="goodsServlet?method=update" onsubmit="return check()">
            <ul>
                <li style="text-align: center;">
                    <input id="avatar" type="file" name="fileName" style="display:none">
                    <img src="./images/${goods.goodsImg}" alt="商品图片" id="img" title="点击上传商品图片"
                         onclick="F_Open_dialog()"/>
                    <p>上传图片</p>
                </li>
                <li>&nbsp;&nbsp;商品编号：<input type="text" class="txt" value="${goods.itemId}" name="itemId"
                                                style="width:400px;"
                                                placeholder="请输入商品编号"/></li>
                <li><span style="color: red">*</span> 商品名称：<input type="text" class="txt" value="${goods.goodsName}"
                                                                      name="goodsName" style="width:400px;"
                                                                      placeholder="请输入商品名称"/></li>
                <li>&nbsp;&nbsp;商品类型：<input type="text" class="txt" value="${goods.goodsType}" name="goodsType"
                                                style="width:400px;"
                                                placeholder="请输入商品类型"/></li>
                <li>&nbsp;&nbsp;商品品牌：<input type="text" class="txt" value="${goods.goodsBrand}" name="goodsBrand"
                                                style="width:400px;" placeholder="请输入商品品牌"/></li>
                <li><span style="color: red">*</span> 商品单价：<input type="text" class="txt" value="${goods.goodsPrice}"
                                                                      name="goodsPrice"
                                                                      style="width:380px;"
                                                                      placeholder="请输入商品单价"/>&nbsp;元
                </li>
                <li><span style="color: red">*</span> 商品数量：<input type="text" class="txt" value="${goods.goodsSum}"
                                                                      name="goodsSum" style="width:400px;"
                                                                      placeholder="请输入商品数量"/></li>
                <li>&nbsp;&nbsp;商品描述：
                    <textarea name="goodsDesc" cols="49" style="padding: 3px;" class="txt" rows="4"
                              placeholder="请输入商品描述">${goods.goodsDesc}</textarea>
                </li>
                <li>&nbsp;&nbsp;商品折扣：
                    <select name="goodsDiscount" style="width:400px;">
                        <option ${goods.goodsDiscount eq '1' ?'selected':''} value="1">请选择商品折扣</option>
                        <option ${goods.goodsDiscount eq 0.1 ?'selected':''} value="0.1">一折</option>
                        <option ${goods.goodsDiscount eq 0.2 ?'selected':''} value="0.2">二折</option>
                        <option ${goods.goodsDiscount eq 0.3 ?'selected':''} value="0.3">三折</option>
                        <option ${goods.goodsDiscount eq 0.4 ?'selected':''} value="0.4">四折</option>
                        <option ${goods.goodsDiscount eq 0.5 ?'selected':''} value="0.5">五折</option>
                        <option ${goods.goodsDiscount eq 0.6 ?'selected':''} value="0.6">六折</option>
                        <option ${goods.goodsDiscount eq 0.7 ?'selected':''} value="0.7">七折</option>
                        <option ${goods.goodsDiscount eq 0.8 ?'selected':''} value="0.8">八折</option>
                        <option ${goods.goodsDiscount eq 0.9 ?'selected':''} value="0.9">九折</option>
                    </select></li>
                <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;合&nbsp;&nbsp;&nbsp;&nbsp;计：<input type="text" class="txt"
                                                                                      name="total" style="width:380px;"
                                                                                      value="${goods.goodsPrice * goods.goodsDiscount}"
                                                                                      readonly/>&nbsp;元
                </li>
                <li class="left-m">
                    <input type="hidden" name="goodsImg" value="${goods.goodsImg}"/>
                    <input type="hidden" name="id" value="${goods.id}">
                    <button type="button" onclick="location.href='goodsServlet'">&lt; 返回</button>
                    <button type="submit">修改</button>
                    <button type="reset">重置</button>
                </li>
            </ul>
        </form>
    </div>
</div>
</body>
<script src="js/jquery-1.12.2.js" type="text/javascript"></script>
<script type="text/javascript">
    // 表单验证
    function check() {
        let $goodsName = $("[name='goodsName']");
        let $goodsPrice = $("[name='goodsPrice']");
        let $goodsSum = $("[name='goodsSum']");

        if ($goodsName.val() === "") {
            $goodsName.focus();
            alert("请输入商品名称！");
            return false;
        } else if ($goodsPrice.val() === "") {
            $goodsPrice.focus();
            alert("请输入商品单价！");
            return false;
        } else if ($goodsSum.val() === "") {
            $goodsSum.focus();
            alert("请输入商品数量！");
            return false;
        } else {
            return true;
        }
    }

    function F_Open_dialog() {
        document.getElementById("avatar").click();
    }

    // 文件上传
    $(function () {
        $("[name='fileName']").change(function () {
            let formData = new FormData();
            formData.append("file", $("[name='fileName']")[0].files[0]);
            $.ajax({
                type: "POST",
                url: "goodsServlet?method=getImg",
                data: formData,
                dataType: "text",
                processData: false,  // 告诉jquery不要去处理请求的数据格式
                contentType: false,  // 告诉jquery不要设置请求头的类型
                success: function (data) {
                    $("input[name='goodsImg']").val(data);
                    $("#img").prop("src", "./images/" + data);
                }
            });
        })
        let input = $("[name='total']");
        let value = parseFloat(input.val()).toFixed(2);
        input.val(value);

        // 计算商品总价
        $("[name='goodsPrice']").blur(calculateTotalPrice);
        $("[name='goodsDiscount']").change(calculateTotalPrice);
    })

    // 计算商品总价
    function calculateTotalPrice() {
        let $goodsPrice = parseFloat($("[name='goodsPrice']").val());
        let $goodsSum = parseFloat($("[name='goodsSum']").val());
        let $goodsDiscount = parseFloat($("[name='goodsDiscount']").val());
        let price = $goodsPrice * $goodsSum * $goodsDiscount;
        $("[name='total']").val(price.toFixed(2));
    }

</script>
</html>
